<template>
	<view class="container">
		<view class="nameView">
			<view class="ticketName">{{ticketInfo.ticketName}}</view>
			<rich-text :nodes="ticketInfo.description"></rich-text>
		</view>
		<view class="notic">
			<view class="title">购票须知</view>
			<view>售卖日期：{{ticketInfoBuyRules.salesStartDate}}至{{ticketInfoBuyRules.salesEndDate}}</view>
			<view>有效日期：{{ticketInfo.effectStartDate}}至{{ticketInfo.effectEndDate}}</view>
		</view>
		<view class="timeView">
			<view class="title">参观日期</view>
			<view class="dateView">
				<view class="date" @click="openDate()">{{visitDate}}</view>
				<view class="price">￥{{ticketInfo.settlePrice}}</view>
			</view>
			<uni-calendar ref="calendar" :insert="false" :start-date="visitDate" :end-date="ticketInfoBuyRules.salesEndDate" @confirm="confirm" />
		</view>
		<view class="timeView">
			<view class="title">证件类型</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
		</view>
		<view class="timeView">
			<view class="title">购票数量</view>
			<view class="numberView">
				<view class="numberBtn" @click="subClick">-</view>
				<view class="number">{{ticketNumber}}</view>
				<view class="numberBtn" @click="addClick">+</view>
			</view>
		</view>

		<view class="visitorView">
			<view class="historyView">
				<view class="historyItem"></view>
			</view>

			<view class="visitorList">
				<view class="visitorItem" v-for="(item, key) in visitors">
					<view class="visitorInfo">
						<view class="infoTxt">姓名：</view>
						<input type="text" placeholder="请输入姓名" v-model="item.name">
					</view>
					<view class="visitorInfo">
						<view class="infoTxt">手机号：</view>
						<input type="number" placeholder="请输入手机号" v-model="item.phone">
					</view>
					<view class="visitorInfo">
						<view class="infoTxt">证件号：</view>
						<input type="text" placeholder="请输入证件号" v-model="item.idCard">
					</view>
				</view>
			</view>
		</view>

		<view class="bottomView">
			<view class="priceView">订单金额：<view class="totalMoney">{{totalMoney}}元</view>
			</view>
			<view class="payBtn" @click="payClick()">在线支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ticketInfoId: '',
				totalMoney: 0,
				ticketInfoBuyRules: {},
				ticketInfo: {},
				desc: '',
				visitDate: '',
				index: 0,
				array: ['身份证', '护照', '港澳通行证'],
				ticketNumber: 1,
				visitors: [{
					name: '',
					phone: '',
					idCard: ''
				}]
			}
		},
		onLoad(options) {
			console.log(options);
			let ticketInfoId = options.ticketInfoId;
			this.ticketInfoId = ticketInfoId;
			let that = this;
			let nowDate = new Date();
			let nowYear = nowDate.getFullYear();
			let nowMonth = nowDate.getMonth() + 1;
			nowMonth = nowMonth > 9 ? nowMonth : '0' + nowMonth;
			let nowDay = nowDate.getDay();
			nowDay = nowDay > 9 ? nowDay : '0' + nowDay;
			that.visitDate = nowYear + '-' + nowMonth + '-' + nowDay;
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			uni.request({
				url: 'https://boss.smart-ideas.com.cn/ticketApi/ticketInfo/get',
				method: 'GET',
				data: {
					ticketInfoId: ticketInfoId
				},
				success: (res) => {
					uni.hideLoading();
					console.log(res);
					let ticketInfo = res.data.data.ticketInfo;
					let ticketInfoBuyRules = res.data.data.ticketInfoBuyRules;
					that.ticketInfo = ticketInfo;
					that.ticketInfoBuyRules = ticketInfoBuyRules;
					that.totalMoney = ticketInfo.settlePrice;
				}
			})
		},
		methods: {
			payClick() {
				let certType = this.array[this.index];
				if (certType == '身份证') {
					certType = 0;
				} else if (certType == '护照') {
					certType = 1;
				} else {
					certType = 3;
				}
				let visitorList = [];
				for(let i = 0; i < this.visitors.length; i++){
					let userName = this.visitors[i].name;
					let phone = this.visitors[i].phone;
					let idCard = this.visitors[i].idCard;
					if (!userName || !phone || !idCard) {
						uni.showModal({
							content: '请先完善游客信息'
						})
						return;
					}
					if (phone.length != 11) {
						uni.showModal({
							content: '请输入正确的手机号'
						})
						return;
					}
					if (certType == 0) {
						if (idCard.length != 18) {
							uni.showModal({
								content: '请输入正确的身份证'
							})
							return;
						}
					}
					visitorList.push({
						userName: userName,
						phone: phone,
						certNumber: idCard,
						certType: certType
					})
				}
				

				let idcardList = [];
				visitorList.forEach(function(visitor, key) {
					let itemIdCard = visitor.idCard;
					idcardList.push(itemIdCard);
				})
				if (new Set(idcardList).size != idcardList.length) {
					wx.showModal({
						content: '请勿输入重复的身份证号！',
					})
					return;
				}

				let params = {
					source: 'MINI',
					payWay: 'MINIPAY',
					ticketInfoId: this.ticketInfoId,
					openId: uni.getStorageSync('openId'),
					totalPrice: this.totalMoney,
					unitPrice: this.ticketInfo.settlePrice,
					visitDate: this.visitDate,
					buyQuantity: this.ticketNumber,
					visitors: visitorList
				};
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://boss.smart-ideas.com.cn/ticketApi/order/create',
					method: 'POST',
					data: params,
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.success) {
							let payParams = JSON.parse(res.data.data.payParams);
							let ticketOrderId = res.data.data.ticketOrderId;
							let payStatus = res.data.data.payStatus;
							if (payStatus == '1') {
								wx.redirectTo({
									url: '/pages/order/orderDetail?ticketOrderId=' + ticketOrderId,
								})
							} else {
								uni.requestPayment({
									nonceStr: payParams.nonceStr,
									package: payParams.package,
									paySign: payParams.paySign,
									timeStamp: payParams.timeStamp,
									signType: payParams.signType,
									success: (res) => {
										uni.redirectTo({
											url: '/pages/order/orderDetail?ticketOrderId=' +
												ticketOrderId,
										})
									}
								})
							}
						} else {
							uni.showModal({
								content: res.data.message
							})
						}
					}
				})
			},
			openDate() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
				this.visitDate = e.fulldate;
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			subClick() {
				let visitorList = this.visitors;
				if (visitorList.length > 1) {
					visitorList.pop();
				}
				this.ticketNumber = visitorList.length;
				this.totalMoney = parseFloat(visitorList.length * this.ticketInfo.settlePrice).toFixed(2);
			},
			addClick() {
				let visitorList = this.visitors;
				visitorList.push({
					name: '',
					phone: '',
					idCard: ''
				})
				this.ticketNumber = visitorList.length;
				this.totalMoney = parseFloat(visitorList.length * this.ticketInfo.settlePrice).toFixed(2);
			}
		}
	}
</script>

<style>
	.container {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 150rpx;
	}

	.nameView {
		background-color: #fff;
		padding: 15px 10px;
		border-bottom: 1px solid #f5f5f5;
	}

	.ticketName {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		line-height: 50rpx;
	}

	.notic {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
	}

	.notic view {
		font-size: 14px;
		color: #333;
		line-height: 23px;
		margin-bottom: 5px;
		padding-left: 10px;
	}

	.notic .title {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		padding-left: 5px;
		border-left: 5px solid #00B3FD;
		line-height: 20px;
		margin-bottom: 5px;
	}

	.timeView {
		padding: 20rpx 20rpx;
		background-color: #fff;
	}

	.timeView .title {
		font-size: 15px;
		color: #333;
		font-weight: bold;
		padding-bottom: 10px;
	}

	.dateView,
	.uni-input {
		width: 200px;
		height: 35px;
		border: 1px solid #92B8B1;
		border-radius: 5px;
		display: flex;
		justify-content: start;
		align-items: center;
		overflow: hidden;
		position: relative;
		padding-left: 10px;
		font-size: 14px;
		color: #333;
	}

	.dateView .date {
		width: 120px;
		line-height: 35px;
		font-size: 14px;
		color: #333;
		background-color: #fff;
	}

	.dateView .price {
		font-size: 14px;
		color: #333;
	}

	.numberView {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.numberView .numberBtn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		background-color: #00B3FD;
		color: #fff;
	}

	.numberView .number {
		width: 120rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #ddd;
		font-size: 30rpx;
		color: #000;
		margin: 0 20rpx;
	}

	.visitorView {
		margin-top: 20rpx;
		border-top: 1px solid #ddd;
		background-color: #fff;
		padding: 20rpx;
	}

	.visitorList {
		width: 100%;
	}

	.visitorItem {
		width: 100%;
		border-bottom: 3px solid #ddd;
	}

	.visitorInfo {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: 1px solid #ddd;
	}

	.infoTxt {
		flex: 0 0 100px;
		font-size: 28rpx;
		color: #000;
		line-height: 35px;
		text-align: right;
	}

	input {
		flex: 1;
		height: 35px;
		font-size: 28rpx;
		color: #000;
	}

	.bottomView {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		border-top: 1px solid #ddd;
		z-index: 999;
	}

	.priceView {
		flex: 1;
		text-align: center;
		line-height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #000;
	}

	.priceView .totalMoney {
		color: #00B3FD;
		font-weight: bold;
		font-size: 40rpx;
	}

	.payBtn {
		flex: 0 0 100px;
		line-height: 50px;
		background-color: #00B3FD;
		color: #fff;
		text-align: center;
	}
</style>